<template>
    <!-- 
    1.循环数组/集合
    for(String hobby : hobbies){}
-->
    <ul>
        <li v-for="hobby in hobbies">{{ hobby }}</li>
    </ul>
    <!-- 2.循环对象中的所有属性 -->
    <ul>
        <li v-for="attr in emp">{{ attr }}</li>
    </ul>
    <!-- 3.循环对象数组/集合 -->
    <table border="1">
        <tr>
            <th>编号</th>
            <th>用户名</th>
            <th>密码</th>
        </tr>
        <tr v-for="user in users">
            <td>{{ user.id }}</td>
            <td>{{ user.username }}</td>
            <td>{{ user.password }}</td>
        </tr>
    </table>
    <!-- 4.循环数字,相当于for(int i = 1; i <= num; i++){} -->
    <ul>
        <li v-for="i in num">{{ i }}</li>
    </ul>
</template>
<script setup>
import { reactive, ref } from 'vue';

const hobbies = ref(['吃饭', '睡觉', '学Java'])
const emp = reactive({ id: 1, name: 'admin', salary: 8000.0 })
const users = ref([
    {
        id: 1,
        username: 'admin',
        password: '111111'
    },
    {
        id: 2,
        username: 'jack',
        password: '222222'
    },
    {
        id: 3,
        username: 'tom',
        password: '333333'
    },
    {
        id: 4,
        username: 'lucy',
        password: '444444'
    }
])
const num = 10;
</script>